<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.LinkedHashMap" %>
	     <%
            
	     List<String> cats1 = new ArrayList<String>();
		   	Map<String, Double> averageMap1 = new LinkedHashMap<String, Double>();
		   	List<Double> ownValues1 = new ArrayList<Double>();
		   	List<Double> averageValues1 = new ArrayList<Double>();
	     	Map<String, Double> ownMap1 = new LinkedHashMap<String, Double>();
	     	double container1 = 0;
	     	String title1 = "";
	     	String subTitle1 = "";
	     	String yAxis1 = "";
	     	try {
	     	averageMap1 = (Map<String, Double>) session.getAttribute("averageMap");
	     	ownMap1 = (Map<String, Double>) session.getAttribute("ownMap");
	     	container1 = (Double) session.getAttribute("container");
	     	title1 = (String) session.getAttribute("title");
	     	subTitle1 = (String) session.getAttribute("subtitle");
	     	yAxis1 = (String) session.getAttribute("yAxis");
	     	}
	     	finally
	     	{
	     		
	     	}
    	
     	for(Map.Entry<String,Double> entry : averageMap1.entrySet()) {
         	String catName = (String) entry.getKey();
         	double averageValue = (Double) entry.getValue();
         	double value=0;
         	if(ownMap1.containsKey(catName)){
         	value = (Double) ownMap1.get(catName);
         	}
         	ownValues1.add(value);
         	averageValues1.add(averageValue);
         	cats1.add(catName);
        }
            %>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
            	backgroundColor: '#FFFFFF',
                renderTo: 'container<%=container1%>',
                type: 'line',
                marginRight: 130,
                marginBottom: 100
            },
            title: {
                text: '<%=title1%>',
                x: 0 //center
            },
            subtitle: {
                text: '<%=subTitle1%>',
                x: -20
            },
            xAxis: {
                categories: [  <%  
                               int i =1;
                for(String cat: cats1){
               	 
          		    	%>
               '<%=cat%>'<% if(i!=cats1.size()){ %>,<%} i++; %>
             
               <% } %>],
               labels: {
                   rotation: -45,
                   align: 'right',
                   style: {
                       fontSize: '13px',
                       fontFamily: 'Verdana, sans-serif'
                   }
               }
            },
            yAxis: {
            	min: 0,
            	
                title: {
                    text: '<%=yAxis1%>'
                    
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }
                ]
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ Math.round(100*this.y)/100+'hours';
                }
            },
            
            legend: {
            	rotation: -90,
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0,
               
            },
            series: [{
                name: 'You',
                data: [  <%               i =1;
                for(double value: ownValues1){
                  	 
      		    	%>
           <%=value%><% if(i!=ownValues1.size()){ %>,<%} i++; %>
         
           <% } %>]
            }, {
                name: 'Average Student',
                data: [<%  
                        i =1;
                for(double averageValue: averageValues1){
               	 
          		    	%>
               <%=averageValue%><% if(i!=averageValues1.size()){ %>,<%} i++; %>
             
               <% } %>
               ]
            
            }]
        });
    });
    
});
</script>
<script src="../Scripts/highcharts/js/highcharts.js"></script>
<script src="../Scripts/highcharts/js/modules/exporting.js"></script>

<div id="container<%=container1%>" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

